<template>
    <div class="address-edit page">
        <div class="con">


            <div class="form">

                <txt-input v-model="address.name" type="text" label="联系人" place-holder="收货人姓名"></txt-input>
                <txt-input v-model="address.mobile" type="number" label="手机号码" place-holder="手机号码"></txt-input>
                <txt-input @click.native="selectAddress" disabled="disabled" v-model="detail" label="地址"
                           place-holder="选择地址"></txt-input>
                <txt-input v-model="address.detail" label="详细地址" place-holder="详细地址"></txt-input>
                <txt-input type="switch" v-model="address.def" style="margin-top: 0.133rem" label="设为默认"></txt-input>
            </div>

            <radius-btn @click.native="confirm" txt="完成" style="margin-top: 0.4rem"></radius-btn>

        </div>
    </div>
</template>

<script>
    import txtInput from "@/components/base/txt-input"
    import radiusBtn from "@/components/base/radius-btn"
    import {getAddress} from "@/api/order";
    import {mergeAddress} from "@/api/order";
    import {addressData} from '@/common/js/area.js'
    import {isPhone} from "@/common/js/num";
    import * as  Toast from '@/toast'
    import * as  Dialog from '@/dialog'

    export default {
        created() {

            this.addressPicker = this.$createCascadePicker({
                title: '选择地址',
                data: addressData,
                onSelect: this.selectHandle,
                onCancel: this.cancelHandle
            })
        },
        activated() {

            if (this.$route.query.id) {
                getAddress(this.$route.query.id).then(res => {
                    this.address = res.data
                })
            }else {//清空数据
                this.address = {}
            }
        },
        data() {
            return {

                address: {
                    name:'',
                    mobile:'',
                    detail:'',
                    province:'',
                    city:'',
                    county:'',
                    detail:''
                },
                def: false
            }
        },
        computed: {
            detail() {
                if (!this.address.province) return ''

                return this.address.province + ' ' + this.address.city + ' ' + this.address.county
            }
        },
        methods: {
            turn(path) {
                this.$router.push(path)
            },
            confirm() {
                if (!this.address.name) {
                    Toast.showInfo("联系人不能为空")
                    return
                }
                if (!this.address.mobile) {
                    Toast.showInfo("手机号码不能为空!")
                    return
                }
                if (!this.detail) {
                    Toast.showInfo("地址不能为空!")
                    return;
                }
                if (!this.address.detail) {
                    Toast.showInfo("详细地址不能为空!")
                    return;
                }
                if (this.address.mobile) {
                    if (!isPhone(this.address.mobile)) {
                        Toast.showInfo("手机号码格式不正确!")
                    }
                }
                mergeAddress(this.address).then(res=>{
                   this.$router.replace("/address")
                })
            },
            selectAddress() {
                this.addressPicker.show()
            },
            selectHandle(selectedVal, selectedIndex, selectedText) {
                if (selectedText) {
                    this.$set(this.address, 'province', selectedText[0])
                    this.address.province = selectedText[0]
                    this.address.city = selectedText[1]

                    this.address.county = selectedText[2]?selectedText[2]:''

                }
            },
            cancelHandle() {

            }
        },
        components: {
            txtInput, radiusBtn
        }
    }
</script>

<style scoped lang="stylus">
    .address-edit
        z-index 2
        background url("~@/assets/cbg.png") no-repeat $page-bg
        background-size 100% auto
        height 100%

        .con
            padding 10px 10px 0px 10px


</style>